
import React from 'react';
import { Modal, Button,Form,Input,DatePicker,Col,InputNumber,Select } from 'antd';
import * as Utils from "../../utils/action";
import TextArea from 'antd/lib/input/TextArea';
const { confirm } = Modal;
const { Search } = Input;
const FormItem = Form.Item;
const {RangePicker,MonthPicker} =DatePicker;
class BasicConfirm extends React.Component {
  state = {
    inputValue:''
  };

  inputChange=(e)=>{
    this.setState({inputValue:e.target.value})
  }
   showConfirm=()=> {
     const p=this;
     const formItemList = [];
     const { getFieldDecorator } = p.props.form;
     const { formList } = p.props;
     if(formList&&formList.length>0){
      formList.forEach(item => {
        const {
          label,
          field,
          tree,
          type,
          initialValue,
          valueField,
          name,
          showTime,
          col,
          onSearch,
          required
        } = item;
        const rulesType = required?[{ required: true, message: `${label}必填` }]:false;
        if (type === "TIMEFRAME") {
          const timeFrame = (
            <Col span={col===undefined?6:col}>
            <FormItem label={label} key={field} >
              {getFieldDecorator(`${field}`)(
                <RangePicker
                style={{width:'100%'}}
                  showTime={showTime?true:false}
                  placeholder="起始日期"
                  format={showTime?"YYYY-MM-DD HH:mm:ss":"YYYY-MM-DD"}
                />
              )}
            </FormItem>
            </Col>
          );
          formItemList.push(timeFrame);
        } else if (type === "DATE") {
          const date = (
            <Col span={col===undefined?24:col} key={field}  >
            <FormItem label={label}>
              {getFieldDecorator(`${field}`,{rules:rulesType})(
                <DatePicker
                style={{width:'100%'}}
                  showTime={showTime?true:false}
                  format={showTime?"YYYY-MM-DD HH:mm:ss":"YYYY-MM-DD"}
                />
              )}
            </FormItem>
            </Col>
          );
          formItemList.push(date);
        } else if (type === "NUMBERFRAME") {
          let arr=field.split('_');
          const number = (
            <Col span={col===undefined?8:col}>
              <Col span={12}>
              <FormItem label={label} key={field} >
              {getFieldDecorator(`${arr[1]}`)(
                <InputNumber    style={{width:'100%'}}  placeholder='最高数量'/>
              )}
            </FormItem>
              </Col>
              <Col span={12}>
              <FormItem key={field} >
              {getFieldDecorator(`${arr[2]}`)(
                <InputNumber    style={{width:'100%'}}  placeholder='最低数量' max={p.props.form.getFieldValue(arr[1])?p.props.form.getFieldValue(arr[1]):Infinity}/>
              )}
            </FormItem>
              </Col>
            
            </Col>
          );
          formItemList.push(number);
        } else if (type === "MONTHDATE") {
          const month = (
            <Col span={col===undefined?6:col}>
            <FormItem label={label} key={field} >
              {getFieldDecorator(`${field}`)(
                <MonthPicker
                placeholder={`请选择${label}`}
                style={{width:'100%'}}
                  showTime={showTime?true:false}
                />
              )}
            </FormItem>
            </Col>
          );
          formItemList.push(month);
        }else if (type === "INPUT") {
          const INPUT = (
            <Col span={col===undefined?6:col}>
              <FormItem key={field} label={label}>
              {getFieldDecorator(`${field}`,{
                  initialValue, rules:rulesType
              })(
                  <Input allowClear placeholder={'请填写'+label} />
              )}
              </FormItem>
            </Col>
          );
          formItemList.push(INPUT);
        } else if (type === "SEARCH") {
          const SEARCH = (
            <Col span={col===undefined?6:col}>
              <FormItem key={field} label={label}>
              {getFieldDecorator(`${field}`,{
                  initialValue, // true | false
              })(
                <Search allowClear	onSearch={(value) =>onSearch(value)} enterButton placeholder={`请选择${label}`}/>
              )}
              </FormItem>
            </Col>
          );
          formItemList.push(SEARCH);
        } else if (type === "SELECT") {
          const SELECT = (
            <Col span={col===undefined?24:col} key={field}>
            <FormItem label={label}>
            {getFieldDecorator(`${field}`,{
                initialValue, rules:rulesType
            })(
              <Select  placeholder={'请选择'+label}
              showSearch
              allowClear
              filterOption={(input, option) =>
                option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
              >
                {Utils.getOptionList(item.list, name,valueField)}
              </Select>
              )}
            </FormItem>
            </Col>
          );
          formItemList.push(SELECT);
        }
      });
     }
     if( p.props.data instanceof Array?p.props.data.length:p.props.data){
      confirm({
        title:p.props.title,
        content:<Form  {... {labelCol: {xs: { span: 30 },sm: { span:6 },},wrapperCol: {xs: {span: 24},sm: {span:14}}}}>
        {formItemList}
        </Form>,
        okText: '确认',
        okType: p.props.okType?p.props.okType:'primary',
        cancelText: '取消',
        onOk() {
            if(p.state.inputValue){
              p.props.handleConfirm(p.state.inputValue,p.props.api,p.props.data);
            }
        },
        onCancel() {p.setState({inputValue:''})},
      });
     }else{
      Utils.openNotification('warning','请选择需要操作的数据')
     }
      
  }
  render(){
    //button: 是否显示为button  buttonType:按钮类型(显示为按钮时) buttonName:显示的名字 api:需要调用的接口  data:传递的数据 
    //title ：弹出框的title content：需要填写值时  (INPUT,TEXTAREA) 目前仅限一个输入框  icon 按钮图标
    const {button,buttonType,buttonName,icon}=this.props;
    return(
      button?<Button type={buttonType?buttonType:'primary'} icon={icon?icon:''} onClick={this.showConfirm}>{buttonName}</Button>:
      <a href onClick={this.showConfirm}>{buttonName}</a>
      
    )
  }
}


export default Form.create()(BasicConfirm);
